import React, {useState, useEffect} from "react";

/**
 *  自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
 *      1. 如果不以“use” 开头，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。
 *      2. 每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。
 *      3. 每次调用 Hook，它都会获取独立的 state。
 *      4. 由于 Hook 本身就是函数，因此我们可以在它们之间传递信息。
 *      5. 在复杂组件中使用 reducer 管理内部 state 的需求很常见，useReducer 的 Hook 已内置到 React 中。
 */
function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);

    useEffect(() => {
        // 模拟判断是否在线
        if (friendID === 1) {
            setIsOnline(true);
        } else if (friendID === 2) {
            setIsOnline(true);
        } else if (friendID === 3) {
            setIsOnline(false);
        }
    }, [friendID]);

    return isOnline;
}

/**
 * @return {string}
 */
function FriendStatus(props) {
    const {friend} = props;
    const isOnline = useFriendStatus(friend.id);
    if (isOnline === null) {
        return 'Loading...';
    }
    return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
    const {friend} = props;
    const isOnline = useFriendStatus(friend.id);

    return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
            {friend.name}
        </li>
    );
}

const friendList = [
    { id: 1, name: 'Phoebe' },
    { id: 2, name: 'Rachel' },
    { id: 3, name: 'Ross' },
];

export function HookTest3() {
    return (
        <div>
            <div>好友列表</div>
            {
                friendList.map(function (item) {
                    return <FriendListItem key={item.id} friend={item}/>
                })
            }
            <div>好友</div>
            <div>
                {friendList[0].name + " "}
                <FriendStatus friend={friendList[0]}/>
            </div>
        </div>
    );
}
